<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户登陆界面</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.7.1.min.js"></script>
    <link rel="stylesheet" href="/plugins/bootstriptable/bootstrap-table.min.css">
    <style>
        b{
            font-weight: bolder;
            color: red;
        }
        body{
            padding:0;
            margin:0;
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            text-align: center;
        }
        .land{
            width: 300px;
            height: 250px;
            margin: 150px auto auto auto;
            background-color: #3e9ca9;
            border-radius: 10px;
            box-shadow:
                /*bottom shadow*/
                    0px 20px 20px rgba(0,0,0,0.2),
                    0px 5px 10px rgba(0,0,0,0.2),
                        /*long bottom shadow*/
                    0px 50px 50px rgba(0,0,0,0.4),
                        /*right shadow*/
                    30px 50px 50px rgba(0,0,0,0.2),
                        /*left shadow*/
                    -30px 50px 50px rgba(0,0,0,0.2),
                        /*right inset*/
                    inset 20px 0px 60px rgba(0,0,0,0.1),
                        /*left inset*/
                    inset -20px 0px 60px rgba(0,0,0,0.1);
        }
        .title{
            margin-top: 40px;
            font-size: 40px;
            font-weight: 900;
            color: #0ff;
        }
        .sub-title{
            color: #0ff;
        }
        .fields{
            margin-top: 40px;
            height: 80px;
        }
        input{
            width: 75%;
            outline: none;
            border: 0px;
            font-size: 16px;
            font-weight: 300;
            background-color: #3e9ca9;
            color: #fff;
        }
        .username{
            border-bottom: #000 solid thin;
            width: 80%;
            margin-left: auto;
            margin-right: auto;
        }
        .password{
            border-bottom: #000 solid thin;
            width: 80%;
            margin-left: auto;
            margin-right: auto;
        }
        .send-button{
            background-color: #0b9346;
            color: #ffffff;
            border: none;
            width: 80%;
            height: 30px;
            margin-top:0px;
            border-radius: 3px;
        }
        .send-button:visited{
            background-color: azure;
        }
        .send-button:hover{
            background-color: #51dd8b;
        }
        .send-button:active{
            background-color: #056608;
        }
    </style>
</head>
<body>
<div class="container-fluid">

    <div class="land">
        <div class="logo"></div>
        <div class="title">Student</div>
        <div class="sub-title">List</div>
        <div class="fields">
            <div class="username">
                <input type="username" class="user-input" placeholder="用户名" id="username" name="username"></div>
            <div class="password">
                <input type="password" class="pass-input" placeholder="用户密码" id="password" name="password"></div>
            <div class="conceal" id = 'conceal'></div>
        </div>
        <button type="button" class="send-button" onclick="login();">登陆</button>
    </div>

</div>
<script src="/plugins/bootstriptable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstriptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">

    function login(){
        var name=$("#username").val();
        var password=$("#password").val();

        $.ajax({
            url: "/webapi/login/user",
            data:{
                username:name,
                password:password
            }
        }).done(function(rs){
            if(rs == 1){
                //成功
                window.location.href="http://localhost:8080/student/list2";
            }
            else if(rs == 2){
                var tno = $('#username').val();
                window.location.href="http://localhost:8080/teacher/tlist?utno="+tno;


            }
            else{
                alert("出错了，您的用户名和密码时乱写的吗？");
            }
        });
    }

</script>
</body>
</html>